<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">

</head>
<body>
    <!--显示翻页器，totalNum 表示目前翻页器管理的列表中数据的总条数，nowPage 表示在那一页，maxPage 表示最大页数，maxDisplay 表示每一页最多显示的数据-->
    <div class="col-md-12" totalNum="0" nowPage="1" maxPage="1" maxDisplay="8" id="pageTurner">
        <button class="col-md-2 col-md-offset-2" style="border: 1px solid black; height: 40px; text-align: center"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(-1)">上一页</button>
        <label class="col-md-2 col-md-offset-1" style="font-size: 20px; text-align: center" id="pageLabel">1 / 1</label>
        <button class="col-md-2 col-md-offset-1" style="border: 1px solid black; height: 40px; text-align: center;"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(1)">下一页</button>
    </div>

    <script type="text/javascript">
        // 翻页器对象和标签对象
        let myPageTurner = $("#pageTurner");
        let myPageLabel = $("#pageLabel");
        let myCallback;

        /**
         * 负责更新翻页器数据（作用的对象是静态添加的翻页器，而不是动态添加的列表中的翻页器）
         * 获取到翻页器和显示标签
         * 通过翻页器获取到 对应列表的数据总条数、翻页之后的回调函数
         * 更新最大页数
         * 然后通过翻页标识、当前页数和最大页数判断如何执行翻页操作
         * @param turnPage 翻页标识（-1表示上一页，0表示不翻页，1表示下一页）
         */
        let myUpdatePageTurner = function updatePageTurnerRoot(turnPage) {
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(myPageTurner.attr("nowPage"));
            let maxDisplay = parseInt(myPageTurner.attr("maxDisplay"));

            // 获取到翻页器对应列表的数据总量
            let totalNum = parseInt(myPageTurner.attr("totalNum"));

            // 获取到翻页器的回调函数
            let callback = myPageTurner.attr("callback");

            // 计算最大页数
            let newMaxPage;
            if (totalNum === 0) {
                newMaxPage = 1
            } else {
                newMaxPage =  Math.floor((totalNum-1) / maxDisplay) + 1;
            }

            // 判断翻页标识（以及是否翻页成功）
            let isTurn = false;
            if (nowPage+turnPage > 0 && nowPage+turnPage <= newMaxPage) {
                nowPage += turnPage;
                isTurn = true;
            }

            // 判断更新后的页数变化（可能执行了删除操作，导致当前页数小于最大页数，这时候要将当前页数改为最大页数）
            if (nowPage > newMaxPage) {
                nowPage = newMaxPage;
            }

            // 将新的数据显示出来
            myPageLabel.html(nowPage + " / " + newMaxPage);

            // 将新的数据更新到翻页器中
            myPageTurner.attr("nowPage", "" + nowPage);
            myPageTurner.attr("maxPage", "" + newMaxPage);
            myPageTurner.attr("maxDisplay", "" + maxDisplay);

            // 调用翻页函数
            if (myCallback !== undefined && isTurn) {
                myCallback();
            }
        }
    </script>
</body>
</html>